<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>四川工科院智能出行系统用户注册</title>
<link type="text/css" rel="stylesheet"
      href="/css/user.css" />
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
</head>
<body class="login_bg">
<section class="loginBox">
    <header class="loginHeader">
        <h1>四川工科院智能出行系统用户注册</h1>
    </header>
    <section class="loginCont">
        <form class="loginForm" action="/userregister"  name="actionForm" id="actionForm"
              method="post" >

            <div class="inputbox">
                <label for="userCode">用户名：</label>
                <!-- 输入用户名后，需要查询用户名是否已存在 -->
                <input type="text" class="input-text" id="userCode" name="name" placeholder="请输入用户名" required/>
                <!-- 放着用户名是否重复的提升休息 -->
                <font color="red">用户名是否可以</font>
            </div>
            <div class="inputbox">
                <label for="userPassword">密码：</label>
                <input type="password" id="userPassword" name="password" placeholder="请输入密码" required/>
                <!-- 放着用户名是否重复的提升休息 -->
                <font color="red">用户名是否可以</font>
            </div>
            <div class="inputbox">
                <label for="userPassword">电话：</label>
                <input type="password" id="phone" name="phone" placeholder="请输入电话" required/>
            </div>
            <div class="subBtn">
                <input type="submit" value="注册"/>
                <input  type="reset" value="重置" />
            </div>
        </form>
    </section>
</section>
</body>
<script type="text/javascript">
    //  判断用户名是否输入完成
    var userCode = null;
    var userPassword = null;

    //使用jQuery
    $(function(){
        //对用户名  控件
        userCode = $("#userCode");
        //把用户提示休息==null
        userCode.next().html("");
//alert(userCode);
        //模拟一下ajax请求


//判断控件是否失去焦点
        userCode.bind("blur",function(){
            //
            userCode.next().html("");
            $.ajax({
                type:"GET",//请求类型
                url:"/userName", //地址
                data:{"name":userCode.val()},//参数
                // dataType:"json",//返回数据的格式
                success: function(data){
                    //alert("------"+data)
                    if(data== "exit"){
                        //用户已经存在
                        userCode.next().html("用户已经存在");
                    }else{
                        //不存在
                        userCode.next().html("用户可以使用");
                    }
                },
                error: function(data){//失败
                    userCode.next().html("用户可以使用");
                }
            });


            //对用户名进行提示   用户名只能是5-10位字符
            userCode.bind("focus",function(){
                //输出提示信息
                userCode.next().html("用户名只能是5-10位字符");
            });
            //对密码输入提示

            userPassword = $("#userPassword");
            userPassword.next().html("");
            //判断
            userPassword.bind("focus",function(){
                //输出提示信息
                userPassword.next().html("密码只能是6-10位字符，数字+字母");
            });

        });

//提交


    });




</script>
</html>